<template>
  <el-dialog width="600px" title="排序" :visible.sync="isShow" append-to-body>
      <div>
          <vxe-table :data.sync="tableDates" border style="width: 100%" height="300" :mouse-config="{selected: true}" :edit-config="{trigger: 'click', mode: 'cell',showStatus: true}" show-header-overflow="tooltip" show-overflow="tooltip" highlight-current-row highlight-hover-row resizable size="mini" ref="CommonTableSort" class="mytablestyle">
              <vxe-table-column field="sortcolumn" title="排序栏" width="200" header-align="center">
                  <template v-slot="{row}">
                      <el-select v-model="row.sortcolumn" clearable filterable>
                          <el-option v-for="item in ColumnOption" :value="item.field" :key="item.field" :label="item.title"></el-option>
                      </el-select>
                  </template>
              </vxe-table-column>
              <vxe-table-column field="defaultsort" title="排序选择" show-overflow-tooltip width="200" align="center">
                  <template v-slot="{row}">
                      <el-radio v-model="row.defaultsort" label="ASC">升序</el-radio>
                      <el-radio v-model="row.defaultsort" label="DESC">降序</el-radio>
                  </template>
              </vxe-table-column>

          </vxe-table>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button icon="el-icon-plus" @click="addsortrecord">新增</el-button>
          <el-button icon="el-icon-delete" @click="delsortrecord">删除</el-button>
          <el-button icon="el-icon-right" @click="insertsortrecord">插入</el-button>
          <el-button icon="el-icon-circle-close" @click="clearsortrecord">清除</el-button>
          <el-button type="button" icon="el-icon-document" @click="confirm" class="el-button el-button--default el-button--small">
              <span>
                  {{confirmBtnText}}
              </span>
          </el-button>
          <el-button type="button" icon="el-icon-close" @click="cancel" class="el-button el-button--default el-button--small el-button--primary ">
              <span>
                  {{cancelBtnText}}
              </span>
          </el-button>
      </span>
  </el-dialog>
</template>

 <script type="text/javascript">
export default {
  data() {
      return {
          isShow: true,
          tableDates: [],
          tableColumn: [],
          ColumnOption: [],
          confirmBtnText: "确定",
          cancelBtnText: "取消",
          okFirstLoading: true,
      };
  },
  created() {
      //this.InitPageDate(); //初始化主列表
      //this.getinitdata(); //初始化下拉框的数据
  },
  mounted() {},
  updated() {
      if (this.okFirstLoading) {
          let row = this.$refs.CommonTableSort.getData(0);
          if (row) {
              this.$refs.CommonTableSort.setCurrentRow(row);
              this.okFirstLoading = false;
          }
      }
  },
  methods: {
      cancel() {
          this.isShow = false;
      },
      confirm() {
          this.$nextTick(() => {
              this.tableDates = [];
              let temp = [];
              let sortdate = this.$refs.CommonTableSort.tableData;
              sortdate.forEach((element) => {
                  if (temp.indexOf(element.sortcolumn) < 0) {
                      this.tableDates.push(element);
                      temp.push(element.sortcolumn);
                  }
              });
              this.issuccess();
          });
      },
      issuccess() {},
      isLogSuccess() {},
      addsortrecord() {
          this.$refs.CommonTableSort.insert({ sortcolumn: "", defaultsort: "ASC" }).then(({ row }) => {
              this.$refs.CommonTableSort.setCurrentRow(row);
          });
      },
      delsortrecord() {
          try {
              var delrow = this.$refs.CommonTableSort.getCurrentRow();
              if (delrow) {
                  var alld = this.$refs.CommonTableSort.tableData;
                  var rowindex = alld.indexOf(delrow);
                  this.$refs.CommonTableSort.remove(delrow);
                  let havedata = this.$refs.CommonTableSort.tableData;
                  if (havedata.length > 0) {
                      if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                      let selectrow = havedata[rowindex];
                      this.$refs.CommonTableSort.setCurrentRow(selectrow);
                  }
              }
          } catch (e) {
              console.log("error", e);
          }
      },
      insertsortrecord() {
          var crow = this.$refs.CommonTableSort.getCurrentRow();
          if (crow) {
              this.$refs.CommonTableSort.insertAt({ sortcolumn: "", defaultsort: "ASC" }, crow).then(({ row }) => {
                  this.$refs.CommonTableSort.setCurrentRow(row);
              });
          } else {
              this.$refs.CommonTableSort.insert({ sortcolumn: "", defaultsort: "ASC" }).then(({ row }) => {
                  this.$refs.CommonTableSort.setCurrentRow(row);
              });
          }
      },
      clearsortrecord() {
          this.tableDates = [];
      },
      savesortrecord() {
          this.innerVisible = false;
      },
  },
};
</Script>

<style scoped>
::v-deep .mytablestyle tr td div .el-input__inner {
  border: 1px solid rgba(255, 254, 254, 0) !important;
  background-color: rgba(255, 254, 254, 0) !important;
}
</style>
 